import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
// 组件数据懒加载(到了组件展示的可视区再去发送组件对应的请求)
// 图片懒加载是 图片容器到了可视区再赋值图片的src属性
// 路由懒加载  到了对应的路由地址后,再加载对应的组件
export function useLazyData(fn: () => void) {
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      if (isIntersecting) {
        fn() // 传递什么方法, 在这调用什么方法
        stop()
      }
    },
    {
      // 参数3中有 threshold 临界值属性值是0-1, 0 表示看到及时赋值 1 完整看到再赋值, 默认值不是0  是0.x
      // 值越大 图片赋值越晚
      threshold: 0,
    }
  )
  return target
}

// 倒计时的hook
export function useCountDown(startNum: number = 60) {
  const time = ref(0)
  const { pause, resume } = useIntervalFn(
    () => {
      time.value--
      if (time.value <= 0) return pause()
    },
    1000,
    { immediate: false }
  )
  const start = () => {
    time.value = startNum
    resume()
  }
  return {
    time,
    start,
  }
}
